import React,{ Component } from 'react'
import {View} from "@tarojs/components";
import styles from "./index.module.scss";
/**
 * 车牌录入键盘显示
 */
export default class LicensePlateEntryInput extends Component<any>{
  constructor(props) {
    super(props);
  }
  state = {
    // 省份简写
    provinces: [
      ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'],
      ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'],
      ['桂', '琼', '渝', '川', '贵', '云', '藏'],
      ['陕', '甘', '青', '宁', '新'],
    ],
    // 车牌输入
    numbers: [
      ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
      ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"],
      ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"],
      ["W", "X", "Y", "Z", "港", "澳", "学","删除"]
    ],
    carnum: [],
    showNewPower: false,
    KeyboardState: false,
  }
  componentDidMount() {
    const{plateNo}=this.props;
    if(plateNo){
      this.setState({carnum:[...plateNo]})
    }
  }
  openKeyboard = ()=>{
    this.setState({
      KeyboardState: true
    })
  }
  showPowerBtn=()=>{
    this.setState({
      showNewPower: true,
      KeyboardState: true
    })
  }
  closeKeyboard =()=>{
    this.setState({
      KeyboardState: false
     })
  }
  bindDelChoose = ()=> {
  }

  // 选中点击设置
  bindChoose=(e,i)=>{
    const {carnum,showNewPower} =this.state;
    const arr=carnum;
    if(i==="删除"){
      this.setState({carnum:arr.slice(0,carnum.length-1),showNewPower:false})
      const{onChange}=this.props;
      if(onChange) onChange(arr.slice(0,carnum.length-1));
      return;
    }
    if((carnum.length<7 && !showNewPower)||(carnum.length<8 && showNewPower)){
      arr.push(i);
      this.setState({carnum:arr})
      const{onChange}=this.props;
      if(onChange) onChange(arr);
    }
  }
    render () {
    const {showNewPower,provinces,KeyboardState,carnum,numbers}=this.state;
    return (
      <View className={styles.page}>
        {/*车牌号码输入框*/}
        <View className={styles.carNumber}>
          <View className={styles.weuiCellsTitle}>请输入您的车牌号</View>
          {/*车牌号头两位*/}
          <View className={styles.carNumberItems}>
            <View className={[styles.carNumberItem, carnum.length===0?styles.status:''].join(' ')} onClick={this.openKeyboard}>{carnum?.[0]}</View>
            <View className={[styles.carNumberItem, carnum.length===1?styles.status:''].join(' ')} onClick={this.openKeyboard}>{carnum?.[1]}</View>
            {/*常规*/}
            <View className={[styles.carNumberItem, carnum.length===2?styles.status:''].join(' ')} onClick={this.openKeyboard}>{carnum?.[2]}</View>
            <View className={[styles.carNumberItem, carnum.length===3?styles.status:''].join(' ')} onClick={this.openKeyboard}>{carnum?.[3]}</View>
            <View className={[styles.carNumberItem, carnum.length===4?styles.status:''].join(' ')} onClick={this.openKeyboard}>{carnum?.[4]}</View>
            <View className={[styles.carNumberItem, carnum.length===5?styles.status:''].join(' ')} onClick={this.openKeyboard}>{carnum?.[5]}</View>
            <View className={[styles.carNumberItem, carnum.length===6?styles.status:''].join(' ')} onClick={this.openKeyboard}>{carnum?.[6]}</View>
            {/*新能源*/}

              {!showNewPower && (
                <View className={[styles.carNumberItem,styles.Newpower].join(' ')} onClick={this.showPowerBtn}>
                  <View>新能源</View>
                </View>
              )}
              {
                showNewPower && (
                  <View className={styles.carNumberItem} onClick={this.openKeyboard}>
                    {carnum?.[7]}
                  </View>
                )
              }

          </View>
        </View>
        {/*虚拟键盘*/}
        {KeyboardState ? (
          <View className={styles.keyboard}>
            <View className={styles.keyboardClose}>
              <View className={styles.keyboardCloseBtn} onClick={this.closeKeyboard}>关闭</View>
            </View>
            {carnum.length===0 &&(
              <View className={styles.keyboardItem}>
                {provinces?.map((item,index) => (
                  <View className={styles.keyboardLine} key={index}>
                    {
                      item?.map((i,indexs)=>{
                         return (
                          <View className={styles.keyboardBtn}  key={indexs}
                            onClick={(e)=>{
                              this.bindChoose(e,i)}
                            }
                          >{i}</View>
                        )
                      })
                    }

                  </View>
                ))
                }
                <View className={styles.keyboardDel} onClick={this.bindDelChoose}>
                  <text className={styles.keyboardDelFont}></text>
                </View>
              </View>
              )}
            {carnum.length>0 &&(
              <View className={[styles.keyboardItem, styles.iscarnumber].join(' ')} >
                {numbers?.map((item,index) => (
                  <View className={styles.keyboardLine} key={index}>
                    {
                      item?.map((i,indexs)=>{
                        if(carnum.length===1 && index===0){
                          return (
                            <View className={styles.keyboardBtn}  key={indexs} style={{backgroundColor:'#fff',color:'#D4D4D4'}}>{i}</View>
                          )
                        }else{
                          return (
                            <View className={styles.keyboardBtn}  key={indexs}
                              onClick={(e)=>{
                                    this.bindChoose(e,i)}
                                  }
                            >{i}</View>
                          )
                        }

                      })
                    }
                  </View>
                ))
                }
            </View>
            )}
          </View>
        ):null}
      </View>
    )
  }
}
